<template>
  <div class="box" ref="viewport">
    <draggable 
      :list="list"
    >
      <div
          class="list-group-item"
          v-for="element in list"
          :key="element.name"
        >
          {{ element.name }}
        </div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  name: 'dragable',
  components: {
    draggable
  },
  data () {
    return {
      list: [
        { name: "John", id: 0 },
        { name: "Joao", id: 1 },
        { name: "Jean", id: 2 }
      ],
    }
  },
  props: {
  },
  watch: {
  },
  created () {
  },
  mounted () { },
  methods: {

  }
}
</script>
<style scoped lang='less'>
.box {
  width: 200px;
}
.list-group-item {
  position: relative;
  display: block;
  padding: .75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, .125);
}
</style>
